<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      父亲
      <p>儿子</p>
      <p>儿子兄弟</p>
      <span>哥们</span>
    </div>
    <script>
      //创建元素节点：document.createElement("nodeName")
      var oDiv = document.querySelector("div");
      var oP = document.createElement("p");
      //创建之后需要进行拼接
      //object.appendChild(nodeName)：只能插入标签，无法同时插入标签里的内容
      oDiv.appendChild(oP); //如果使用object.innerHTML进行标签的插入，原本存在的标签关联的事件、数据会无效化。

      //创建文本节点document.createTextNode("文本")
      var oText = document.createTextNode("小弟弟");
      oP.appendChild(oText); //用innerHTML同样可以实现

      //查找想要的元素节点进行位置变动
      var oSpan = document.querySelector("span");
      oP.appendChild(oSpan);

      //复制想要的元素给某个节点object.cloneNode(true|false);默认为false：只复制标签;ture:连带标签中的文本一起复制
      var cloneSpan = oSpan.cloneNode(true);
      oDiv.appendChild(cloneSpan);

      //替换节点中的元素object.replaceChild(替换节点,被替换节点)
      var One_oP = document.querySelector("p");
      var aSpan = document.querySelectorAll("span");
      console.log(One_oP.innerHTML);
      oDiv.replaceChild(One_oP, aSpan[1]); //替换节点会发生位置变化

      //删除某个节点;object.remove()：自杀，没有任何挽救方式。
      //object.removeChild(节点)：父亲杀儿子，返回一个节点类型的值,
      //可以使用变量接收并appendChild,并且儿子节点关联的事件、数据等不会失效。
      var aSpan = document.querySelectorAll("span");
      aSpan[0].remove();
      //console.log(aSpan[0]); //undefined
      var aP = document.querySelectorAll("p");
      aP[1].onclick = function () {
        console.log("我是儿子兄弟");
      };
      var rm_p = oDiv.removeChild(aP[1]);
      console.log(typeof rm_p); //object
      console.log(rm_p); //<p>小弟弟</p>
      oDiv.appendChild(rm_p); //点击追加的标签,上面的事件仍可以执行
    </script>
  </body>
</html>
